<template>
  <div>
    <br>
    <van-nav-bar
        title="清洗美容"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <van-tabs v-model="active">
      <van-tab title="标准洗车">

        <van-cell-group v-for="item in standardList" :key="item.id" v-if="item.xiche==='标准洗车'">
          <van-card
              desc=""
              :price="item.jiage"
              :origin-price="item.menshi"
              :title="item.mdname"
              :thumb="item.img"
              @click="details(item.id)"
          >
            <template #tags>
              <van-tag plain type="default">⭐{{ item.xingjishu }}.0</van-tag>
              <van-tag plain type="default">{{ item.danshu }}单</van-tag>
              <van-tag plain type="default" style="right: -130px;">{{ (item.juli / 1000).toFixed(2) }} km</van-tag>
            </template>

            <template #footer>
              <van-button type="danger" size="base" @click="goumai(item.id)">购买</van-button>
            </template>
          </van-card>
          <van-button class="but" type="default" block @click="fuwu(item.id)">{{ item.xiche }}
          </van-button>
        </van-cell-group>
      </van-tab>
      <van-tab title="精致洗车">

        <van-cell-group v-for="item in standardList" :key="item.id" v-if="item.xiche==='精致洗车'">
          <van-card
              desc=""
              :price="item.jiage"
              :origin-price="item.menshi"
              :title="item.mdname"
              :thumb="item.img"
              @click="details(item.id)"
          >
            <template #tags>
              <van-tag plain type="default">⭐{{ item.xingjishu }}.0</van-tag>
              <van-tag plain type="default">{{ item.danshu }}单</van-tag>
              <van-tag plain type="default" style="right: -130px;">{{ (item.juli / 1000).toFixed(2) }} km</van-tag>
            </template>

            <template #footer>
              <van-button type="danger" size="base" @click="goumai(item.id)">购买</van-button>
            </template>
          </van-card>
          <van-button class="but" type="default" block @click="fuwu(item.id)">{{ item.xiche }}
          </van-button>
        </van-cell-group>
      </van-tab>
      <van-tab title="洗车打蜡">

        <van-cell-group v-for="item in standardList" :key="item.id" v-if="item.xiche==='洗车打蜡'">
          <van-card
              desc=""
              :price="item.jiage"
              :origin-price="item.menshi"
              :title="item.mdname"
              :thumb="item.img"
              @click="details(item.id)"
          >
            <template #tags>
              <van-tag plain type="default">⭐{{ item.xingjishu }}.0</van-tag>
              <van-tag plain type="default">{{ item.danshu }}单</van-tag>
              <van-tag plain type="default" style="right: -130px;">{{ (item.juli / 1000).toFixed(2) }} km</van-tag>
            </template>

            <template #footer>
              <van-button type="danger" size="base" @click="goumai(item.id)">购买</van-button>
            </template>
          </van-card>
          <van-button class="but" type="default" block @click="fuwu(item.id)">{{ item.xiche }}
          </van-button>
        </van-cell-group>
      </van-tab>
      <van-tab title="内饰清洗">

        <van-cell-group v-for="item in standardList" :key="item.id" v-if="item.xiche==='内饰清洗'">
          <van-card
              desc=""
              :price="item.jiage"
              :origin-price="item.menshi"
              :title="item.mdname"
              :thumb="item.img"
              @click="details(item.id)"
          >
            <template #tags>
              <van-tag plain type="default">⭐{{ item.xingjishu }}.0</van-tag>
              <van-tag plain type="default">{{ item.danshu }}单</van-tag>
              <van-tag plain type="default" style="right: -130px;">{{ (item.juli / 1000).toFixed(2) }} km</van-tag>
            </template>

            <template #footer>
              <van-button type="danger" size="base" @click="goumai(item.id)">购买</van-button>
            </template>
          </van-card>
          <van-button class="but" type="default" block @click="fuwu(item.id)">{{ item.xiche }}
          </van-button>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      standardList: [],
      active: 0,
      ff: [],
      a: '',
// 经纬度
      Ra: '',
      Qa: '',
      city: '定位中...',
      aaa:false,
    }
  },
  methods: {

    details(mid) {
      if (this.aaa==true){
        this.goumai(mid)
      }else {
        this.$router.push({path: '/mendianxq', query: {mid: mid}})
      }
    },
    goumai(id) {
      this.aaa=true;
      this.$router.push({path: '/dingdan', query: {id: id}})
    },

    fuwu(id) {
      this.$router.push({path: '/fuwu', query: {id: id}})
    },
    findStandard() {
      this.axios.get(`http://1.94.221.254:9999/api-qcfw-mendian/standard/findStandard`).then(res => {
        this.standardList = res.data.data
      })
    },
    onClickLeft() {
      this.$router.push('/shouye')
    },

    //获取当前地理位置
    addresaaa() {
      this.axios.get(`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${this.abcde}&key=497c66a7bfeda317880776a6d296ca5f&radius=1000&extensions=all `).then(res => {
            // 获取市级
            // this.city.qu=res.data.regeocode.addressComponent.district
            // 获取区级

            this.city = res.data.regeocode.addressComponent.province
            console.log("当前地理位置：" + this.city)
          }
      )
    },
    // 测试目的地的经纬度坐标
    async nnnn(value) {

      const res = await this.axios.get(`https://restapi.amap.com/v3/geocode/geo?address=${value}&output=JSON&key=497c66a7bfeda317880776a6d296ca5f`);
      this.ff = res.data;
      this.a = this.ff.geocodes[0].location;  // 使用 optional chaining 防止空值错误
      await this.fanhui1();  // 等待 fanhui 执行完成

    },
// 返回多少米
    async fanhui1() {

      const res = await this.axios.get(`https://restapi.amap.com/v3/distance?origins=${this.abcde}&destination=${this.a}&output=JSON&key=497c66a7bfeda317880776a6d296ca5f`);
      this.a = res.data.results[0].distance;  // 使用 optional chaining 防止空值错误

    },

// 测修车店的距离
    async getjuliyy() {
      setTimeout(async () => {
        // 遍历所有修车店并计算距离
        for (const item of this.standardList) {
          const mudidi = item.mdname;
          await this.nnnn(mudidi);  // 等待 nnnn 完成
          item.juli = this.a;  // 将计算的距离赋给修车店
        }
      }, 3000);
    },
  },
  created() {
    // if ()
    this.findStandard()
    var token = localStorage.getItem('token');
    if (token === null) {
      this.$router.push('/');
    }
    // 延迟获取地理位置
    setTimeout(() => {
      this.Ra = sessionStorage.getItem("R");
      this.Qa = sessionStorage.getItem("Q");
      console.log("执行已完成")
      console.log("经度=====" + this.Ra)
      console.log("纬度=====" + this.Qa)
      this.abcde = this.Ra + ',' + this.Qa
      console.log("合起来：" + this.abcde)
      this.addresaaa();
    }, 1);
    this.getjuliyy();
  }
}
</script>

<style scoped>
.but {
  //float: right;
}
</style>
